import React, { Component } from 'react';
import Icon from '@ant-design/icons';
import { Dropdown, Menu } from 'antd';
import { connect } from 'dva';
import PropTypes from 'prop-types';
// barra标题图标
import icon1 from '../../../../assets/busi/workStation/Barra/barra_product_icon.png';
import icon2 from '../../../../assets/busi/workStation/Barra/hold_titile_icon.png';
import icon3 from '../../../../assets/busi/workStation/Barra/market_titile_icon.png';
import icon4 from '../../../../assets/busi/workStation/Barra/barra_analysis_icon.png';
// 非标工作台标题图标
import icon11 from '../../../../assets/busi/workStation/Barra/product_titile_icon.png';
import icon12 from '../../../../assets/busi/workStation/Barra/trial_titile_icon.png';
import icon13 from '../../../../assets/busi/workStation/Barra/analysis_titile_icon.png';
import icon14 from '../../../../assets/busi/workStation/Barra/info_titile_icon.png';
// 用户视图图标
import icon21 from '../../../../assets/busi/workStation/Barra/userView_info_icon.png';
import icon22 from '../../../../assets/busi/workStation/Barra/userView_tip_icon.png';
import icon24 from '../../../../assets/busi/workStation/Barra/userView_manage_icon.png';
import videoBtn from '@/src/assets/comps/other/contentPackage/videoWBtn.png';

import back from '../../../../assets/busi/workStation/Barra/back_icon.png';

import styles from './style.less';

class CardC extends Component {
  // 默认值
  static defaultProps = {
    title: '',
    type: '1', // 1-产品组合,2-持仓交易
    titleTip: '', //提示信息
    showContent: true, //是否展开
    onExpendClick: () => {}, //展开收起按钮事件
    backClick: () => {}, //展开收起按钮事件
    titleIsShow: true,
    noVideo:false,//不需要产品视频按钮 
  };

  constructor(props) {
    super(props);
    this.state = {
      showIncome: true, //当前是否展开
    };
  }

  componentDidMount() {
   if(!this.props.noVideo) this.queryVeidoList();
    this.setState({
      showIncome: this.props.showContent,
    });
  }
  UNSAFE_componentWillReceiveProps(nextProps) {
    if (nextProps.showContent != this.props.showContent) {
      this.setState({
        showIncome: nextProps.showContent,
      });
    }
  }
  //展开箭头按钮事件
  onExpendClick = (e) => {
    this.setState(
      {
        showIncome: !this.state.showIncome,
      },
      () => {
        //抛出事件，参数为当前展开true/收起false
        this.props.onExpendClick(this.state.showIncome);
      },
    );
  };

  backClick = (e) => {
    this.props.changeFormPage('cancel');
  };

  changeImg = (key) => {
    let img = '';
    switch (key) {
      // barra标题图标
      case '1':
        img = icon1;
        break;
      case '2':
        img = icon2;
        break;
      case '3':
        img = icon3;
        break;
      case '4':
        img = icon4;
        break;
      // 非标工作台标题图标
      case '11':
        img = icon11;
        break;
      case '12':
        img = icon12;
        break;
      case '13':
        img = icon13;
        break;
      case '14':
        img = icon14;
        break;
      // 用户视图图标
      case '21':
        img = icon21;
        break;
      case '22':
        img = icon22;
        break;
      case '24':
        img = icon24;
        break;
      // 穿透工作台图标
      case '31':
        img = icon11;
        break;
      case '32':
        img = icon11;
        break;
      case '33':
        img = icon14;
        break;
      case '34':
        img = icon13;
        break;
    }
    return img;
  };

  // 查询当前页面视频列表
  queryVeidoList = () => {
    const { type } = this.props;
    let query = window.location.href.split('#/')[1] + '/' + type;
    this.props.dispatch({
      type: 'systemVedioM/queryVeidoList',
      payload: {
        path: query,
      },
      callback: (data) => {
        this.setState({
          veidoList: data || [],
        });
      },
    });
  };

  // 视频列表
  dataExportMenu = () => {
    return (
      <Menu onClick={this.handleMenuClick}>
        {this.state.veidoList.length &&
          this.state.veidoList.map((item) => {
            return (
              <Menu.Item key={item.value} onClick={() => this.openVedio(item.value)}>
                {item.title}
              </Menu.Item>
            );
          })}
      </Menu>
    );
  };

  // 播放视频
  openVedio = (id) => {
    let url = window.location.href.split('/#/')[0] + `/#/videoPlayer?id=${id}`;
    window.open(url);
  };

  render() {
    const { title, titleTip, type, titleIsShow } = this.props;
    const { showIncome, veidoList } = this.state;
    let arrow = this.changeImg(type);
    return (
      <div>
        <div className={styles.titleCont}>
          <div className={styles.content}>
            {type == 'back' ? (
              <Icon
                component={() => (
                  <a onClick={() => this.backClick()}>
                    <img src={back} alt='icon' style={{ marginRight: '10px' }} />
                  </a>
                )}
              />
            ) : (
              <Icon component={() => <img src={arrow} alt='icon' style={{ marginRight: '10px' }} />} />
            )}
            <span className={styles.title}>{title}</span>
            <span className={styles.tip}>{titleTip}</span>
          </div>
          <div className={styles.btnCont}>
            {veidoList && veidoList.length &&!this.props.noVideo? (
              <div className={styles.moreOperation}>
                <Dropdown overlay={this.dataExportMenu} trigger={['click']} arrow={true} overlayClassName='menuListPackage'>
                  <div style={{ display: 'flex', alignItems: 'center' }}>
                    <img src={videoBtn}></img>
                    {showIncome ? <span>查看视频</span> : ''}
                  </div>
                </Dropdown>
              </div>
            ) : (
              ''
            )}
            {titleIsShow && <span onClick={() => this.onExpendClick()}>{!showIncome ? '展开' : '收起'}</span>}
          </div>
        </div>
        <div>{this.props.content}</div>
      </div>
    );
  }
}
// props默认值
CardC.propsTypes = {
  title: PropTypes.string, // 标题名
  type: PropTypes.string, // 类型 1-产品组合,2-持仓交易,3-市场分析,4-组合分析优化
  titleTip: PropTypes.string, // 备注提示信息
  onExpendClick: PropTypes.func, // 展开,收起事件
  noVideo:PropTypes.bool,//不需要查看视频按钮
};

export default connect(({ systemVedioM }) => ({ systemVedioM }))(CardC);
